import React from "react";
import './index.scss';

export default function Footer(props) {
	const statess = ['all', 'actived', 'completed'];
	const {left,handleListStateChanged,listState} = props;

	return (
		<div className="todo-info">
			<span className="total">{left} item left</span>
			<div className="tabs">
				{statess.map((item) => {
					return (
						<span key={item} className={`btn primary ${listState === item ? 'actived' : ''}`} onClick={() => handleListStateChanged(item)}>
							{item}
						</span>
					);
				})}
			</div>
			<button className="info btn">Clear Completed</button>
		</div>
	);
}
